Архитектура плагинов JavaScript Module Federation: создание динамической системы плагинов

В современной сложной среде веб-разработки крайне важно создавать модульные, масштабируемые и удобные в обслуживании приложения. Один из мощных методов достижения этой цели — архитектура плагинов, где функциональность разбивается на независимые, динамически загружаемые модули. JavaScript Module Federation, функция Webpack 5, предоставляет надежный механизм для реализации таких архитектур. В этой статье рассматриваются тонкости использования Module Federation для создания динамической системы плагинов.

Что такое Module Federation?

Module Federation позволяет приложениям JavaScript динамически обмениваться кодом во время выполнения. Это означает, что модуль (часть кода) из одного приложения может использоваться непосредственно другим приложением, без необходимости пересборки или повторного развертывания. Это достигается за счет предоставления и использования модулей в разных сборках и даже в разных развертываниях.

Традиционные методы обмена кодом, такие как пакеты npm, требуют пересборки и повторного развертывания использующих приложений всякий раз, когда обновляется общая зависимость. Module Federation устраняет эти накладные расходы, что делает его идеальным для сценариев, где требуются частые обновления и независимые развертывания.

Зачем использовать Module Federation для архитектуры плагинов?

Module Federation предлагает несколько преимуществ при создании архитектуры плагинов:

• Динамическая загрузка модулей: Плагины можно загружать и выгружать во время выполнения, что позволяет приложениям адаптироваться к изменяющимся требованиям без необходимости полного повторного развертывания.
• Разделение: Плагины разрабатываются и развертываются независимо, что снижает зависимости между различными частями приложения.
• Масштабируемость: Приложение можно легко расширить с помощью новых плагинов, не затрагивая существующую функциональность.
• Удобство обслуживания: Плагины можно обновлять и обслуживать независимо, что снижает риск внесения ошибок в основное приложение.
• Повторное использование кода: Плагины можно повторно использовать в нескольких приложениях, что повышает согласованность и снижает усилия по разработке.
• Управление версиями и откаты: Вы можете управлять различными версиями плагинов и легко откатываться к предыдущим версиям, если это необходимо.

Основные понятия: хост и удаленные контейнеры

Module Federation вращается вокруг двух ключевых концепций:

• Хост-контейнер: Основное приложение, которое использует удаленные модули (плагины).
• Удаленный контейнер: Приложение, которое предоставляет модули (плагины) для использования хостом.

Хост-контейнер динамически извлекает файл удаленной точки входа из удаленного контейнера, который содержит манифест предоставленных модулей. Затем хост может получить доступ к этим модулям и использовать их, как если бы они были частью его собственной кодовой базы.

Реализация динамической системы плагинов с помощью Module Federation: пошаговое руководство

Давайте пройдемся по процессу создания простой системы плагинов с использованием Module Federation. Мы создадим хост-приложение и приложение удаленного плагина.

1. Настройка хост-приложения (хост-контейнера)

Сначала создайте новый каталог проекта и инициализируйте новый npm-проект:

            mkdir host-app
cd host-app
npm init -y
            

              
                Copy
              
            
          

Установите Webpack и его зависимости:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Создайте файл `webpack.config.js` в каталоге `host-app` со следующей конфигурацией:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3000,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Host',
      remotes: {
        'plugin': 'Plugin@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

Объяснение:

• `name`: Имя хост-приложения.
• `remotes`: Определяет удаленные контейнеры, которые будет использовать хост. В этом случае он использует удаленный контейнер с именем `plugin` из `http://localhost:3001/remoteEntry.js`. Синтаксис `Plugin@` означает, что `name` ModuleFederationPlugin удаленного контейнера — «Plugin».
• `shared`: Перечисляет зависимости, которые совместно используются хостом и удаленными контейнерами. Это предотвращает загрузку дубликатов этих зависимостей. Использование `shared` имеет решающее значение для предотвращения ошибок и обеспечения правильной работы плагина.

Создайте каталог `src` и добавьте файл `index.js` со следующим содержимым:

            import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';

const PluginComponent = React.lazy(() => import('plugin/PluginComponent'));

const App = () => {
  return (
    <div>
      <h1>Host Application</h1>
      <Suspense fallback={<div>Loading Plugin...</div>}>
        <PluginComponent />
      </Suspense>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

            

              
                Copy
              
            
          

Объяснение:

• Мы используем `React.lazy` для динамического импорта `PluginComponent` из удаленного `plugin`. Это крайне важно для ленивой загрузки плагина и предотвращения задержек при начальной загрузке.
• Компонент `Suspense` используется для обработки состояния загрузки во время извлечения плагина.

Создайте каталог `public` и добавьте файл `index.html` со следующим содержимым:

            <!DOCTYPE html>
<html>
<head>
  <title>Host Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Добавьте файл конфигурации Babel `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

Обновите свой `package.json` скриптом запуска:

            {
  "name": "host-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
            

              
                Copy
              
            
          

2. Настройка удаленного приложения (контейнера плагина)

Создайте новый каталог проекта для плагина:

            mkdir plugin-app
cd plugin-app
npm init -y
            

              
                Copy
              
            
          

Установите Webpack и его зависимости:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Создайте файл `webpack.config.js` в каталоге `plugin-app` со следующей конфигурацией:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3001,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Plugin',
      filename: 'remoteEntry.js',
      exposes: {
        './PluginComponent': './src/PluginComponent',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

Объяснение:

• `name`: Имя удаленного контейнера (плагина). Это должно совпадать с именем, используемым в конфигурации `remotes` хоста.
• `filename`: Имя файла удаленной точки входа, который будет извлекать хост.
• `exposes`: Определяет модули, которые предоставляет удаленный контейнер. В этом случае мы предоставляем модуль `PluginComponent`. Ключ './PluginComponent' используется в операторе импорта хоста (например, `import('plugin/PluginComponent')`).
• `shared`: То же, что и у хоста, перечисляет общие зависимости. Жизненно важно, чтобы общие зависимости и их версии были совместимы между хостом и удаленным.

Создайте каталог `src` и добавьте файл `PluginComponent.jsx` со следующим содержимым:

            import React from 'react';

const PluginComponent = () => {
  return (
    <div style={{border: '1px solid blue', padding: '10px'}}>
      <h2>Plugin Component</h2>
      <p>This is a dynamically loaded plugin!</p>
    </div>
  );
};

export default PluginComponent;

            

              
                Copy
              
            
          

Создайте файл `index.js` в каталоге `src` для экспорта PluginComponent:

            import PluginComponent from './PluginComponent';

export default PluginComponent;
            

              
                Copy
              
            
          

Создайте каталог `public` и добавьте файл `index.html` со следующим содержимым:

            <!DOCTYPE html>
<html>
<head>
  <title>Plugin Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Добавьте файл конфигурации Babel `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

Обновите свой `package.json` скриптом запуска:

            {
  "name": "plugin-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
            

              
                Copy
              
            
          

3. Запуск приложений

Запустите хост-приложение и приложение плагина, выполнив команду `npm start` в соответствующих каталогах.

Перейдите по адресу `http://localhost:3000` в своем браузере. Вы должны увидеть хост-приложение с динамически загруженным компонентом плагина.

Расширенные возможности и соображения

Управление версиями и откаты

Module Federation поддерживает управление версиями, что позволяет управлять различными версиями плагинов. Вы можете указать ограничения версии в конфигурации `remotes` хоста. Например:

            remotes: {
  'plugin': 'Plugin@http://localhost:3001/remoteEntry.js@1.0.0',
}
            

              
                Copy
              
            
          

Это указывает хосту использовать версию 1.0.0 плагина. Если доступна более новая версия, хост продолжит использовать указанную версию до тех пор, пока она не будет явно обновлена. Внедрение надежного управления версиями имеет решающее значение для предотвращения критических изменений и обеспечения стабильности приложения.

Соображения безопасности

При использовании Module Federation безопасность имеет первостепенное значение. Примите во внимание следующее:

• Аутентификация и авторизация: Внедрите надлежащие механизмы аутентификации и авторизации, чтобы гарантировать, что только авторизованные пользователи могут получать доступ к плагинам и использовать их.
• Целостность кода: Проверьте целостность удаленных модулей, чтобы предотвратить внедрение вредоносного кода в приложение. Рассмотрите возможность использования политики Content Security Policy (CSP) для ограничения источников, из которых приложение может загружать ресурсы.
• Управление зависимостями: Тщательно управляйте зависимостями как хоста, так и удаленных контейнеров, чтобы избежать уязвимостей. Регулярно обновляйте зависимости до последних версий.
• Проверка ввода: Проверяйте все данные, полученные из удаленных модулей, чтобы предотвратить атаки путем внедрения кода.
• CORS (совместное использование ресурсов между разными источниками): Правильно настройте CORS, чтобы разрешить хост-приложению получать доступ к файлу удаленной точки входа из приложения плагина.

Обнаружение и управление плагинами

Для более сложных систем плагинов вам может потребоваться механизм обнаружения и управления плагинами. Этого можно достичь с помощью реестра плагинов или службы обнаружения. Центральный реестр может хранить информацию о доступных плагинах, включая их местоположение, версию и зависимости. Затем хост-приложение может запросить реестр, чтобы найти и загрузить соответствующие плагины.

Рассмотрите следующие подходы:

• Централизованная конфигурация: Храните URL-адреса плагинов в центральном файле конфигурации (например, в файле JSON), который хост-приложение считывает во время выполнения. Это позволяет легко добавлять, удалять или обновлять плагины без повторного развертывания хост-приложения.
• Обнаружение на основе API: Создайте конечную точку API, которая возвращает список доступных плагинов. Затем хост-приложение может получить этот список и динамически загружать плагины.
• Архитектура, управляемая событиями: Используйте шину событий или очередь сообщений, чтобы уведомлять хост-приложение о появлении новых плагинов. Это обеспечивает асинхронное обнаружение и загрузку плагинов.

Динамическая конфигурация и активация плагинов

Предоставление пользователям возможности динамически настраивать и активировать плагины — мощная функция. Для этого требуется механизм хранения и управления конфигурациями плагинов. Вы можете использовать базу данных, файл конфигурации или облачную службу конфигурации для хранения настроек плагина. Затем хост-приложение может считывать эти параметры во время выполнения и соответственно активировать плагины. Рассмотрите возможность предоставления пользовательского интерфейса для управления конфигурациями плагинов.

Обработка асинхронных операций и обработка ошибок

При работе с динамически загружаемыми плагинами важно правильно обрабатывать асинхронные операции и ошибки. Используйте `async/await` или Promises для управления асинхронным кодом. Внедрите надлежащую обработку ошибок для перехвата и регистрации любых ошибок, возникающих во время загрузки или выполнения плагина. Предоставляйте пользователю информативные сообщения об ошибках. Рассмотрите возможность использования централизованной службы регистрации ошибок для отслеживания ошибок во всех плагинах.

Разделение кода и оптимизация производительности

Чтобы оптимизировать производительность, используйте разделение кода, чтобы разбить приложение и плагины на более мелкие фрагменты. Это позволяет браузеру загружать только тот код, который необходим для конкретной страницы или функции. Webpack обеспечивает встроенную поддержку разделения кода. Рассмотрите возможность использования ленивой загрузки для загрузки плагинов только тогда, когда они необходимы. Сведите к минимуму и сжимайте код, чтобы уменьшить размер файла.

Тестирование и непрерывная интеграция

Тщательно протестируйте свою систему плагинов, чтобы убедиться, что она работает правильно. Напишите модульные тесты, интеграционные тесты и сквозные тесты. Используйте систему непрерывной интеграции (CI) для автоматического запуска тестов при каждом изменении кода. Внедрите конвейер непрерывной доставки (CD) для автоматизации развертывания приложения и плагинов.

Реальные примеры и варианты использования

Module Federation используется в различных реальных приложениях, в том числе:

• Платформы электронной коммерции: Динамическая загрузка рекомендаций по продуктам, платежных шлюзов и поставщиков услуг доставки. Например, глобальная платформа электронной коммерции может использовать Module Federation для интеграции различных поставщиков платежей в зависимости от местоположения клиента. В Северной Америке он может загрузить плагин для Stripe, а в Европе — плагин для PayPal или Klarna.
• Системы управления контентом (CMS): Предоставление пользователям возможности устанавливать и активировать плагины для расширения функциональности CMS. CMS может позволить пользователям устанавливать плагины для SEO-оптимизации, интеграции с социальными сетями или анализа контента.
• Панели мониторинга и платформы аналитики: Динамическая загрузка различных виджетов и визуализаций. Глобальная аналитическая платформа может загружать плагины для различных источников данных, таких как Google Analytics, Adobe Analytics или Salesforce.
• Архитектуры микрофронтенда: Создание крупномасштабных веб-приложений как коллекции независимо развертываемых микрофронтендов. Крупное предприятие может использовать Module Federation для создания своего веб-приложения как коллекции микрофронтендов, каждый из которых отвечает за определенную бизнес-функцию, такую как управление учетными записями, каталог продуктов или обработка заказов.
• Системы дизайна: Обмен компонентами пользовательского интерфейса и токенами дизайна между несколькими приложениями. Глобальная организация с несколькими брендами может использовать Module Federation для совместного использования общей системы дизайна во всех своих приложениях, обеспечивая согласованность и сокращая усилия по разработке.

Рекомендации по созданию динамических систем плагинов с помощью Module Federation

Вот несколько рекомендаций, которые следует помнить при создании динамических систем плагинов с помощью Module Federation:

• Поддерживайте небольшой размер и целевую направленность плагинов: Каждый плагин должен отвечать за определенную часть функциональности. Это упрощает обслуживание и обновление плагинов.
• Определите четкие интерфейсы плагинов: Определите четкие интерфейсы для взаимодействия плагинов с хост-приложением. Это гарантирует, что плагины совместимы с хостом и предотвращает критические изменения.
• Используйте семантическое управление версиями: Используйте семантическое управление версиями для управления версиями плагинов. Это упрощает отслеживание изменений и обеспечение совместимости.
• Предоставьте документацию: Предоставьте четкую и лаконичную документацию для своих плагинов. Это помогает пользователям понять, как устанавливать, настраивать и использовать плагины.
• Внедрите рекомендации по обеспечению безопасности: Следуйте рекомендациям по обеспечению безопасности, чтобы защитить свое приложение и плагины от уязвимостей.
• Отслеживайте производительность плагина: Отслеживайте производительность своих плагинов, чтобы выявить любые узкие места. Оптимизируйте код для повышения производительности.
• Автоматизируйте развертывание: Автоматизируйте развертывание своего приложения и плагинов. Это снижает риск ошибок и обеспечивает быстрое развертывание обновлений.
• Используйте согласованный стиль кодирования: Обеспечьте согласованный стиль кодирования во всех плагинах. Это упрощает чтение и обслуживание кода.
• Напишите модульные тесты: Напишите модульные тесты для своих плагинов, чтобы убедиться, что они работают правильно.
• Используйте средство проверки кода: Используйте средство проверки кода для автоматической проверки кода на наличие ошибок.

Заключение

JavaScript Module Federation предоставляет мощный и гибкий механизм для создания динамических систем плагинов. Используя Module Federation, вы можете создавать модульные, масштабируемые и удобные в обслуживании приложения, которые могут адаптироваться к изменяющимся требованиям. Следуя рекомендациям, изложенным в этой статье, вы можете создавать надежные и безопасные системы плагинов, отвечающие потребностям вашей организации.

Эта технология особенно ценна в международных контекстах, позволяя предприятиям адаптировать свои программные предложения к конкретным регионам или сегментам клиентов без развертывания полностью отдельных приложений. Module Federation, от интеграции локальных платежных шлюзов до доставки контента для конкретного региона, обеспечивает более персонализированный и эффективный пользовательский опыт во всем мире.